<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.8/axios.js"></script>

</head>
<body>
  <button>GET</button>
  <button>POST</button>
  <button>AJAX</button>

  <script>

    const btns = document.querySelectorAll('button')
    // 配置baseURL
    axios.defaults.baseURL = 'http://127.0.0.1:8000'

    btns[0].onclick = function () {
      // get请求 'http://127.0.0.1:8000/axios-server
      axios.get('/axios-server', {
        // url参数
        params: {
          id: 100,
          vip: 7
        },
        //请求头信息
        headers: {
          name: 'atguigu',
          age: 20
        }
      }).then(value => {
        console.log(value)
      })
    }


    btns[1].onclick = function () {
      axios.post('/axios-server', {
          username: 'admin',
          pwd: 'admin'
        },
        {
        //url参数
        params: {
          id: 100,
          vip: 7
        },
        //请求头信息
        headers: {
          height: 180,
          weight: 180
        },
      }).then(value => {
        console.log(value)
      })
    }


    btns[2].onclick = function () {
      axios({
        // 请求方法
        method: 'POST',
        // url
        url: '/axios-server',
        // url参数
        params: {
          id: 100,
          vip: 7
        },
        //头信息
        headers: {
          a:100,
          b:200
        },
        //请求体参数
        data: {
          username: 'xxx',
          pwd: '123'
        }
      }).then(response => {
        // console.log(response)
        //响应状态码
        console.log(response.status)
        //响应状态字符串
        console.log(response.statusText)
        // 响应头信息
        console.log(response.headers)
        // 响应体信息
        console.log(response.data)
      })
    }

  </script>
</body>
</html>